<template>
  <div id="item">
    <img v-lazy="getImg" :key="getImg" alt="">
    <div class="goods-info">
      <p>{{recommend.title}}</p>
      <span class="price">¥{{recommend.price}}</span>
      <span class="collect">{{recommend.cfav}}</span>
    </div>
  </div>
</template>

<script>
export default {
  name: 'IshopDetailrecommendlistitem',
  props: {
    recommend:{
      type: Object,
      default: {}
    }
  },
  data() {
    return {
      
    };
  },

  mounted() {
    
  },
  computed: {
      getImg() {
        return this.recommend.img || this.recommend.image || this.recommend.show.img
      }
  },
  methods: {
    
  },
};
</script>

<style scoped>
  #item{
    width: 48%;
  }
  #item img{
    width: 100%;
  }
  
  .goods-info{
    font-size: 12px;
    text-align: center;
    padding: 5px;
  }
  
  .goods-info p{
    overflow: hidden;
    /* 不换行 */
    white-space: nowrap;
    text-overflow: ellipsis;
    margin-bottom: 3px;
  }
  
  .goods-info .price {
      color: var(--color-high-text);
      margin-right: 20px;
  }
  
  .goods-info .collect {
      position: relative;
    }
  
  .goods-info .collect::before {
      content: '';
      position: absolute;
      left: -15px;
      top: 0;
      width: 14px;
      height: 14px;
      background: url("~assets/img/common/collect.svg") 0 0/14px 14px;
  }
  
  </style>